<template>
  <div class="business_manage">
    <header>
      <!-- <el-button size="mini" type="success" class="el-icon-circle-plus-outline" @click="addShow = true"> 新增商户</el-button> -->
    </header>

    <section>
      <el-table :data="tableData" v-loading="loading" border size="mini" height="100%">
        <el-table-column label="商户姓名" prop="username" align="center"></el-table-column>
        <el-table-column label="角色" align="center">
          <template slot-scope="scope">
            {{scope.row.isShopkeeper | isShopkeeperFilter}}
          </template>
        </el-table-column>
        <el-table-column label="电话" prop="telephone" align="center"></el-table-column>
        <el-table-column label="店铺(个)" align="center">
          <template slot-scope="scope">
            {{scope.row.shopCount | countFilter}}
          </template>
        </el-table-column>
        <el-table-column label="关联店铺" align="center">
          <template slot-scope="scope">
            {{ scope.row.shopList | shopListFilter }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="地址" prop="" align="center"></el-table-column> -->
        <el-table-column label="操作" prop="" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="configureShow = true,row = scope.row">配置店铺</el-button>
            <el-button size="mini" type="danger" @click="delate(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <footer>
      <el-pagination
        :current-page="searchForm.currPage"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="searchForm.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        align="center"
        style="margin-top: 10px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>

    <el-dialog :visible.sync="addShow" width="500px" :close-on-click-modal="false" :close-on-press-escape="false">
      <addOwner v-if="addShow" @closeDialog="addShow = false" @refresh="getOwerList" />
    </el-dialog>

    <el-dialog :visible.sync="configureShow" width="500px" :close-on-click-modal="false" :close-on-press-escape="false">
      <configure v-if="configureShow" :row="row" @closeDialog="configureShow = false" @refresh="getOwerList"/>
    </el-dialog>

  </div>
</template>

<script>
  import addOwner from './components/addOwner.vue'
  import configure from './components/configureShop.vue'

  export default {
    name: "parkingOwner",
    components: { addOwner , configure },
    filters: {
      isShopkeeperFilter(owner) {
        return owner == 1 ? '店主' : '店员'
      },
      countFilter(count) {
        return count == null ? '0' : count
      },
      shopListFilter(list) {
        let shopNames = null;
        if(list) {
          list.forEach(item => {
            if(shopNames) {
              shopNames += '，' + item.shopName;
            } else {
              shopNames = item.shopName;
            }

          })
        }
        return shopNames
      }
    },
    data() {
      return {
        addShow: false,
        configureShow: false,
        searchForm: {
          currPage: 1,
          pageSize: 10
        },
        total: 0,
        tableData: [],
        loading: true
      }
    },
    mounted() {
      this.getOwerList();
    },
    methods: {
      getOwerList() {
        this.$axios({
          method: 'get',
          url: '/shop/shop-manager/get-manager-page',
          params: this.searchForm
        }).then((res) => {
          if(res.code == 200) {
            this.tableData = res.data.records;
            this.total = parseInt(res.data.total);
            this.loading = false;
          }
        })
      },

      delate(row) {
        this.$confirm('此操作将永久删除该车场主, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios({
            method: 'post',
            url: '/shop/shop-manager/delete',
            data: this.$qs.stringify({managerId: row.id})
          }).then((res) => {
            if(res.code == 200) {
              this.getOwerList();
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            } else {
              this.$message(res.desc)
            }
          })

        }).catch(() => {});
      },

      // 分页修改每页显示条数
      handleSizeChange(val) {
        this.searchForm.pageSize = val;
        this.getOwerList();
      },
      // 分页跳转页面
      handleCurrentChange(val) {
        this.searchForm.currPage = val;
        this.getOwerList();
      }
    }
  }
</script>

<style scoped>
  .business_manage {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  header {
    height: 50px;
    padding: 6px 10px;
  }
  section {
    height: calc(100% - 100px);
    padding: 0 16px;
  }
  footer {
    height: 50px;
    width: 100%;
    position: absolute;
    bottom: 0;
  }
  .el-icon-circle-plus-outline {
    float: right;
    margin-right: 20px;
  }


</style>
